<template>
  <div class="box">
    <div class="wrapper" :class="{ 'form-success': isHide }">
      <div class="container">
        <h1>welcome!</h1>
        <h2 :style="displayObject">注册成功</h2>
        <p :style="displayObject"><i class="el-icon-loading"></i>{{ countDown }}秒后即将跳转登录界面</p>
        <form action="" :class="{ hide: isHide }">
          <ul class="items">
            <li v-for="(item, index) in count" :key="index" @click="select(index)" :class="{ active: isActive === index + 1 }"></li>
          </ul>
          <div class="row" :class="{ enable: isActive === 1, disable: isApprent === 1 }">
            <div class="shape selfshoke"><i class="iconfont icon-xingmingyonghumingnicheng"></i></div>
            <input type="text" placeholder="username" v-model="form.username" />
            <div class="shape shake select" @click="next(1)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 2, disable: isApprent === 2 }">
            <div class="shape shake"><i class="iconfont icon-yonghu2"></i></div>
            <input type="text" placeholder="name" v-model="form.name" />
            <div class="shape shake select" @click="next(2)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 3, disable: isApprent === 3 }">
            <div class="shape shake"><i class="iconfont icon-mima2"></i></div>
            <input type="password" placeholder="password" v-model="form.password" />
            <div class="shape shake select" @click="next(3)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 4, disable: isApprent === 4 }">
            <div class="shape shake"><i class="iconfont icon-dianhua2"></i></div>
            <input type="text" placeholder="telephone" v-model="form.phone" />
            <div class="shape shake select" @click="next(4)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 5, disable: isApprent === 5 }">
            <div class="shape shake"><i class="iconfont icon-wxbzhanghu"></i></div>
            <input type="text" placeholder="Sno" v-model="form.Sno" />
            <div class="shape shake select" @click="next(5)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 6, disable: isApprent === 6 }">
            <div class="shape shake"><i class="iconfont icon-wxbzhanghu"></i></div>
            <input type="text" placeholder="address" v-model="form.address" />
            <div class="shape shake select" @click="next(6)"><i class="el-icon-bottom"></i></div>
          </div>
          <div class="row" :class="{ enable: isActive === 7, disable: isApprent === 7 }">
            <div class="shape shake"><i class="iconfont icon-xingqiu"></i></div>
            <button @click.prevent="postRegister">注册</button>
            <div class="shape shake select"><i class="iconfont icon-xingqiu1"></i></div>
          </div>
        </form>
      </div>

      <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { userRegiration } from '@/api/index.js'
export default {
  data() {
    return {
      count: 7,
      isActive: 1,
      isApprent: 0,
      isHide: false,
      countDown: 3,
      displayObject: { display: 'none' },
      form: {
        username: '',
        name: '',
        password: '',
        phone: '',
        Sno: '',
        address: ''
      }
    }
  },
  methods: {
    next(index) {
      this.isApprent = index
      this.isActive = index + 1
    },
    select(index) {
      this.isApprent = this.isActive
      this.isActive = index + 1
    },
    async postRegister() {
      for (const item in this.form) {
        if (this.form[item].trim() === '') {
          return this.open({ msg: '请正确填写完所有信息', title: '信息错误' })
        }
      }

      const { data } = await userRegiration('/api/home/userregister', this.form)
      console.log(data)
      if (data.message === '注册成功') {
        this.isHide = true
        this.displayObject.display = 'block'
        this.displayObject.transform = 'translateY(85px)'

        setInterval(() => {
          if (--this.countDown === 0) {
            this.$router.replace('userlogin')
          }
        }, 1000)
      } else {
        this.open({ msg: data.message, title: '填写信息错误' })
      }
    },
    open(data) {
      this.$alert(data.msg, data.title, {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>
<style lang="less" src="@/assets/css/userRegistration.less" scoped></style>
<style lang="less" scoped>
@import url('//at.alicdn.com/t/font_2903624_m9vickga7n.css');
</style>
